<template>
	<div>
		<Header></Header>
		<Swiper :swiperList="swiperList"></Swiper>
		<Icons :iconList="iconList"></Icons>
		<Recommend :recommendList="recommendList"></Recommend>
		<Weekend :weekendList="weekendList"></Weekend>
	</div>
</template> 

<script>
import Header from './components/Header'	
import Swiper from './components/Swiper'
import Icons from './components/Icons'
import Recommend from './components/Recommend'
import Weekend from './components/Weekend'
import axios from 'axios'
import { mapState } from 'vuex'
export default {
		name: 'Home',
		components: {
			Header,		// () => import('./components/Header') 异步加载网页
			Swiper,
			Icons,
			Recommend,
			Weekend
		},
		data () {
			return {
				swiperList: [],
				iconList: [],
				recommendList: [],
				weekendList: [],
				lastCity: ''
			}
		},
		methods: {
			getHomeInfo () {
				axios.get('/api/index.json?'+this.city) 
				.then(this.getHomeInfoSucc)
			},
			getHomeInfoSucc (res) {
				res = res.data
				if (res.ret && res.data) {
					this.swiperList = res.data.swiperList
					this.iconList = res.data.iconList
					this.recommendList = res.data.recommendList
					this.weekendList = res.data.weekendList
				}
				
			}
			
		},
		computed: {
			...mapState(['city'])
		},
		mounted () {
			this.lastCity = this.city
			this.getHomeInfo()
		},
		activated () {
			if (this.lastCity !== this.city) {
				this.lastCity = this.city
				this.getHomeInfo()
			}
			
		}
	}
</script>